<!--
 @description 任务项
 @fileName Item.vue
 @author zengqiongying
 @created 2023/06/12 13:41:04
-->
<template>
  <div class="task-item-view" @click="onDetail">
    <div class="mb4 flex">
      <span class="name">{{ itemData.sadAddress }}</span>
      <template v-if="pageSource !== 'todoList'">
        <!-- statusName: 验收状态 -->
        <span
          :class="[
            {
              'color-warning': itemData.statusName === '未派发',
              'color-normal': itemData.statusName === '验收中',
              'color-error': itemData.statusName === '已退回',
              'color-grey': ['已完成', '已提交'].includes(itemData.statusName)
            }
          ]"
        >
          {{ itemData.statusName }}
        </span>
      </template>
    </div>
    <div class="mb4 flex-warp">
      <span class="tip">
        <template v-if="operateType === 1">
          <img class="icon" src="~@/assets/images/item-icon-checkaccept.png" />
        </template>
        <template v-if="operateType === 2">
          <img class="icon" src="~@/assets/images/item-icon-review.png" />
        </template>
        {{ itemData.acceptMold }}
      </span>
      <!-- <template v-if="pageSource !== 'todoList'"> -->
      <span v-for="(user, i) in ysSpecialist" :key="i" class="tip">{{ user }}</span>
      <!-- </template> -->
    </div>
    <div class="content">
      <div class="color-black">
        <!-- 装修项目号 -->
        {{ itemData.renovationProjectNo }}
      </div>
      <div>
        <!-- 门店编码，验收面积 -->
        <span>{{ itemData.storeCode }}</span>
        <span>{{ toThousands(itemData.acceptArea) }}㎡</span>
      </div>
      <div v-if="itemData.ysStartTime">
        <span>开始时间</span>
        <span>{{ parseTime(itemData.ysStartTime, '{y}/{m}/{d}') }}</span>
      </div>
      <div v-if="itemData.ysEndTime && ['已提交', '已完成'].includes(itemData.statusName)">
        <span>完成时间</span>
        <span>{{ parseTime(itemData.ysEndTime, '{y}/{m}/{d}') }}</span>
      </div>
    </div>
    <div v-if="pageSource !== 'todoList'" class="btns">
      <div v-if="itemData.statusName === '验收中'" class="btn radius-larg ctm-btn-grey-outline" @click.stop="onEdit">
        修改基础信息
      </div>
      <template v-if="pageSource === 'task'">
        <!-- 任务管理可操作 -->
        <div
          v-if="['未派发', '验收中'].includes(itemData.statusName)"
          class="btn radius-larg ctm-btn-grey-outline"
          @click.stop="onDetail"
        >
          {{
            itemData.photoNumber === 0 || [null, undefined, ''].includes(itemData.ysSpecialist)
              ? `分配${operateType === 1 ? '验收' : '复查'}`
              : `开始${operateType === 1 ? '验收' : '复查'}`
          }}
        </div>
        <div
          v-if="itemData.statusName === '已提交'"
          class="btn radius-larg ctm-btn-grey-outline"
          @click.stop="onReturn"
        >
          退回
        </div>
        <div
          v-if="itemData.statusName === '已完成'"
          class="btn radius-larg ctm-btn-grey-outline"
          @click.stop="onReview"
        >
          复查
        </div>
      </template>
      <template v-else>
        <!-- 只有未派送可操作 -->
        <div
          v-if="itemData.statusName === '未派发' && operateType === 1"
          class="btn radius-larg ctm-btn-grey-outline"
          @click.stop="onEdit"
        >
          开始验收
        </div>
        <div
          v-if="itemData.statusName === '未派发' && operateType === 2"
          class="btn radius-larg ctm-btn-grey-outline"
          @click.stop="onDetail"
        >
          开始复查
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
  import { parseTime, toThousands } from '@/utils'
  import { defineComponent, computed } from 'vue'
  export default defineComponent({
    name: 'TaskCommonItemView',
    props: {
      pageSource: {
        type: String,
        default: '' //页面来源（task 任务管理，soft 软装，hard 硬装 , todoList 首页待办）
      },
      itemData: {
        type: Object,
        default: () => {}
      }
    },
    setup(props, { emit }) {
      const onReturn = () => {
        // 退回
        emit('return')
      }
      const onEdit = () => {
        // 验收
        emit('edit')
      }
      const onDetail = () => {
        if (props.itemData.statusName === '验收中') {
          const photoNumber = Number(props.itemData.photoNumber || 0)
          if (photoNumber === 0) {
            onEdit()
            return
          }
        } else if (props.itemData.statusName === '未派发') {
          onEdit()
          return
        }
        // 详情
        emit('detail')
      }
      const onReview = () => {
        // 复查
        emit('review')
      }

      // 操作类型：1 验收 / 2 复查
      const operateType = computed(() => {
        if (props.itemData?.acceptMold) {
          if (props.itemData.acceptMold.indexOf('验收') > -1) {
            return 1
          }
          if (props.itemData.acceptMold.indexOf('复查') > -1) {
            return 2
          }
        }
        return 0
      })

      // 验收人员
      const ysSpecialist = computed(() => {
        if (props.itemData?.ysSpecialist) {
          const names = `${props.itemData.ysSpecialist}`.replaceAll('、', ',')
          return names.split(',')
        }
        return []
      })

      return {
        toThousands,
        parseTime,
        onReturn,
        onEdit,
        onDetail,
        onReview,
        operateType,
        ysSpecialist
      }
    }
  })
</script>
<style lang="less" scoped>
  .task-item-view {
    margin-bottom: 8px;
    padding: var(--spacing-16px);
    background: var(--bg-global-weaker);
    border-radius: var(--radius-xl);
    .mb4 {
      margin-bottom: 4px;
    }
    .mb2 {
      margin-bottom: 2px;
    }
    .name {
      flex: 1;
      margin-right: 10px;
      font: var(--font-main-title-strengthen);
      color: var(--texticon-default-strong);
    }
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .flex-warp {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    .tip {
      margin: 2px 4px 2px 0;
      padding: 0 var(--spacing-4px);
      height: 24px;
      display: inline-flex;
      align-items: center;
      font: var(--font-point);
      color: var(--button-grey-default);
      border: 1px solid var(--button-grey-default);
      border-radius: var(--radius-l);
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 2px;
      }
      &:last-child {
        margin-right: 0;
      }
    }
    .content {
      > div {
        padding: 2px 0;
        font: var(--font-main-body);
        color: var(--texticon-default-stronger);
        display: flex;
        align-items: center;
        justify-content: space-between;
        &:last-child {
          padding-bottom: 0;
        }
      }
    }
    .btns {
      margin-top: 8px;
      display: flex;
      justify-content: flex-end;
      .btn {
        padding: 8px 15px;
        height: 36px;
        box-sizing: border-box;
        margin-left: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>
